<template>
  <view class="out-main">
	
    <swiper class="topBg" 
	  @tap="previewImage(shopInfo.images)" 
	  :style="{height: bgHeight+'rpx'}" >
		<swiper-item v-for="(item,index) in shopInfo.images" :key="index">
			<image :src="item" mode="aspectFill"></image>
		</swiper-item> 
	</swiper>
	<div class="main-content" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
		<image class="logo" @tap="previewImage(shopInfo.logo)" :src="shopInfo.logo"></image>
		<div class="title-bar">
			<div class="title">{{shopInfo.title}}</div>
		</div>
		<div class="info-bar">
			<div class="row1">
				<div class="col1">
					<div class="tit">评分</div>
					<div class="num">{{ shopInfo.mark }}</div>
				</div>
				<div class="col2">
					<div class="tit">月售</div>
					<div class="num">{{shopInfo.ordernum}}</div>
				</div>
				<div class="col3">
					<div class="tit">商家营业</div>
					<div class="stat">{{shopInfo.isbusiness == 0?'未营业':'营业中'}}</div>
				</div>
			</div>
			<div class="row2">
				<div class="label1">
					<div class="quan">券</div>
					<div class="miaoshu">{{shopInfo.quan_money}}</div>
				</div>
				<div class="label2">
					<div class="miaoshu">店内支持使用支付金</div>
				</div>
			</div>
			<div class="row3">
				<div class="dizhi">
					{{shopInfo.address}}
				</div>
				<div class="icon-group">
					<div class="daohang" @tap="Goto">
						<uni-icons type="location-filled" size="20" color="#999"></uni-icons>
						<span>导航</span>
					</div>
					<div class="dianhua" @tap="playphone">
						<uni-icons type="phone-filled" size="20" color="#999"></uni-icons>
						<span>电话</span>
					</div>
				</div>

			</div>
		</div>
		
	</div>
	<div class="navigator">
		<div class="nav-item" v-if="cates.length>0" :class="{active: activeIndex === 0}" @click="handleNavItemClick(0)">
			<span>点菜</span>
		</div>
		<div class="nav-item" :class="{active: activeIndex === 1}" @click="handleNavItemClick(1)">
			<span>商家</span>
		</div>
	</div>
	<scroll-view scroll-y style="flex: 1; margin-top: 20rpx" v-if="activeIndex === 1">
		<div class="merchant-info">
			<div class="shop-env">
				<!-- 店内环境 -->
				<div class="title">
					<uni-icons class="image" type="image" size="22" color="#333333"></uni-icons>
					<span>店内环境</span>
					<div class="more">
						更多<uni-icons type="right" size="14" color="#999999" @tap="previewImage(shopInfo.images)"></uni-icons>
					</div>
				</div>
				<div class="pic-group" style="justify-content: flex-start">
					<div class="pic-item" v-for="(item,index) in shopInfo.images" v-if="index<3" :key="index">
						<image 
							class="pic"
							width="100"
							mode="aspectFill"
							:src="item"
							@tap="previewImage(item)"
						></image>
					</div>
				</div>
			</div>
		</div>
		<div class="merchant-info">
			<div class="shop-env">
				<!-- 店内环境 -->
				<div class="title">
					<uni-icons class="image" type="person" size="22" color="#333333"></uni-icons>
					<span>商家档案</span>
				</div>
				<div class="pic-group" @tap="previewImage(shopInfo.yyzz_images)">
					<div class="yyzz">营业执照</div>
					<div class="more">
						<uni-icons type="right" size="22" color="#333333"></uni-icons>
					</div>
				</div>
			</div>
		</div>
		<div class="merchant-info">
			<div class="shop-env">
				<div class="title">
					<uni-icons class="image" type="person" size="22" color="#333333"></uni-icons>
					<span>商家介绍</span>
				</div>
				<div class="pic-group">
					<div class="yyzz" v-html="shopInfo.content"></div>
				</div>
			</div>
		</div>
	</scroll-view>
	
	<div class="order-dish" v-if="activeIndex===0">
		<scroll-view class="aside" scroll-y>
			<div class="sidebar " v-for="(item,index) in cates" :key="index" @click="activeCate(item.id)" :class="{active: item.id === currentCate}">
				{{ item.name }}
			</div>
		</scroll-view>  
		<scroll-view class="receip" scroll-y :scroll-top="scrollTop" @scroll="onScroll" :scroll-with-animation="true">
			<div v-for="category in cates" :key="category.id" :id="'category-' + category.id">
				<div class="category-title">{{ category.name }}</div>
				<div class="goods-bar" v-for="(item,index) in category.goods" :key="item.id" :id="'goods-' + item.id">
					<div class="goods-logo">
						<image mode="aspectFill" @tap.stop="previewImage(item.cover)"
						:src="item.cover"></image>
					</div>
					<div class="goods-info">
						<div class="goods-name">
							{{ item.goods_name }}
						</div>
						<div class="goods-rank">
							本店人气第{{ index+1 }}名
						</div>
						<div class="sales">月售：{{ item.sales }}份</div>
						<div class="select">
							<div class="goods-price">
								<div class="yuan">￥</div>
								<div class="price">{{ item.goods_price }}</div>
							</div>
							<div class="operate">
								<div class="sub" v-if="item.buy > 0" @click="subGoods(item.id)">-</div>
								<div class="num">{{ item.buy }}</div>
								<div class="add" v-if="item.buy < item.stock" @click="addGoods(item.id)">+</div>
							</div>
						</div>
						
					</div>
				</div>
			</div>
		</scroll-view>
	</div>
	<div class="footer" v-if="activeIndex===0">
		<view class="shop-cart" v-if="showDrawer">
			<view class="cart-header">
				<div class="cart-header-left-title">已加购商品</div>
				<div class="cart-header-left">
					<div class="cart-header-left-close" @click="clearCart">
						<uni-icons type="trash" size="24" color="#999999"></uni-icons>
						<span>清空</span>						
					</div>
				</div>
			</view>
			<scroll-view scroll-y class="cart-list">
				<div class="cart-item" v-for="(item,index) in vuex_cart.rows" :key="index">
					<div class="cart-item-left">
						<image :src="item.cover" mode="aspectFill" width="100" height="100"></image>
					</div>
					<div class="cart-item-second">
						<div class="cart-item-name">{{ item.goods_name }}</div>
						<div class="cart-item-guige">{{ item.goods_attr}}</div>
						<div class="cart-item-price"> <span class="rmb">￥</span>{{ item.goods_price }}</div>
					</div>
					<div class="cart-item-right">	
						<div class="cart-item-sub" @click="subGoods(item.id)">-</div>
						<div class="cart-item-total">{{ item.quantity }}</div>
						<div class="cart-item-add" v-if="item.quantity < item.stock" @click="addGoods(item.id)">+</div>

					</div>
				</div>
			</scroll-view>
		</view>
		
		<div class="foot-icon" @click="toggleDrawer">
			<image width="32" height="32" src="https://admin.cqycgyl.com/uploads/20250918/21b0603f5b1005cc729c442d4b6c1ab5.png"></image>
			<div class="tip">{{ vuex_cart.count }}</div>
		</div>
		<div class="total-bar">						
			<div class="total-top">
				<div class="rmb">￥</div>
				<div class="total-price">{{ vuex_cart.total }}</div>
			</div>
			<div class="total-bottom">
				支付可获得{{ getCoupon }}兑换券
			</div>
		</div>
		<view class="footer-btn">
			<span v-if="fukuan.open" class="old-pay" @click="toOnlinePay">
				{{fukuan.name}}
			</span>
			<button v-if="vuex_cart.count>0" class="submit" @click="goToOrder">
				结算
			</button>
		</view>
	</div>
	
  </view>
</template>

<script>
export default {
	data() {
		return {
			image: 'https://admin.cqycgyl.com/uploads/20250906/522af8afed3099bb65db661b9a92783b.png',
			activeIndex: 1,
			shopInfo: {},	
			goodslist: [],
			cates: [],
			currentCate: 0,
			dragStartY: 0,
			dragOffsetY: 0,
			bgHeight: 564,
			scrollTop: 0,
			categoryHeights: [], // 存储每个分类的高度
			isScrolling: false,// 防止滚动冲突,
			showDrawer: false,
			fukuan:{
				open: false,
				name: '',
				event: '',
			}
		}
	},
	
	 onLoad(options){
		this.getPayType();

		this.id = options.id;
		console.log(this.id);

		

		if(this.vuex_cart){            
			if(this.vuex_cart.rows.length>0 && this.vuex_cart.rows[0].shop_id == this.id){
			}else{
				console.log('清空购物车');
				this.$u.clearCart();
			}
		}
		
		this.$u.api.shop.getStoreInfo(options.id).then(res =>{ 
			if(res.code == 200){
				this.shopInfo = res.data
				if(res.data.medal == 1){
					this.image = 'https://admin.cqycgyl.com/uploads/20250906/a61e25e63835f8b3dff858e88b4a338f.png'
				}else if(res.data.medal == 2){
					this.image = 'https://admin.cqycgyl.com/uploads/20250906/5fdf68f3d760cfc5483440a442785ccb.png'
				}else{
					this.image = 'https://admin.cqycgyl.com/uploads/20250906/522af8afed3099bb65db661b9a92783b.png'
				}
	
				return res.data
			}
		}).then(
		() => {
			this.$u.api.merchant.getGoodsList({shop_id: this.id}).then(res =>{
				if(res.code == 1){
					if(res.data.length>0){
						this.activeIndex = 0;
					}else{
						this.activeIndex = 1;
					}
					this.cates = res.data
					this.goodslist = []
					this.cates = this.cates.map(item => {
						// 为每个商品添加分类ID
						const goodsWithCategory = item.goods.map(goods => ({
							...goods,
							category_id: item.id,
						}))
						item.goods.map(goods => {
							const cartItem = this.vuex_cart.rows.find(row => row.id === goods.id);
							goods.buy = cartItem ? cartItem.quantity : 0;
							return goods;
						})
						
						this.goodslist.push(...goodsWithCategory)
						return item;
					})
					
					
					// 设置默认选中第一个分类
					if (this.cates.length > 0) {
						this.currentCate = this.cates[0].id
					}
					
					// 计算分类高度
					this.calculateCategoryHeights()
				}
			});
		})
	},
	computed: {
		getCoupon(){
			return (this.shopInfo.bili / 100.0 * this.vuex_cart.total * this.shopInfo.rlb).toFixed(2)
		}
	},
	methods: {	
		toOnlinePay(){
			uni.navigateTo({
				url: '/pages/mall/onlinepay?shop_id=' + this.id
			});
		},
		getPayType(){
			this.$u.api.describ.getPayType().then(res =>{
				this.fukuan = res.data;
			});
		},
		toOnlinePay(){
			uni.navigateTo({
				url: '/pages/mall/onlinepay?shop_id=' + this.id
			});
		},
		goToOrder(){
			console.log('结算')
			uni.navigateTo({
				url: '/pages/mall/paygoods?shop_id=' + this.id
			});
		},
		clearCart(){
			this.$u.clearCart();
			this.showDrawer = false;
		},
		closeDrawer(){
			this.showDrawer = false;
		},
		
		showCart(){
			this.showDrawer = true;
		},
		toggleDrawer(){
			this.showDrawer = !this.showDrawer;
		},
		handleTouchStart(e) {
			this.dragStartY = e.touches[0].clientY;
		},
		handleTouchMove(e) {
			this.dragOffsetY = e.touches[0].clientY;
			
		},
		handleTouchEnd(e) {
		   // 递归缩小bgHeight直到小于等于100
		   // direction: -1 表示向上收缩，1 表示向下展开
		   // targetHeight: 希望动画结束后的高度
		   const animateBgHeight = (direction, targetHeight) => {
			   const step = 20;
			   // 判断是否已经达到目标高度
			   if ((direction === -1 && this.bgHeight <= targetHeight) || (direction === 1 && this.bgHeight >= targetHeight)) {
				   this.bgHeight = targetHeight;
				   return;
			   }
			   // 根据方向递增或递减
			   this.bgHeight += step * direction;
			   // 防止超过目标高度
			   if ((direction === -1 && this.bgHeight < targetHeight) || (direction === 1 && this.bgHeight > targetHeight)) {
				   this.bgHeight = targetHeight;
			   }
			   setTimeout(() => {
				   animateBgHeight(direction, targetHeight);
			   }, 16);
		   }


		   this.dragOffsetY = this.dragOffsetY - this.dragStartY;
			 if(this.dragOffsetY < -100){
			   animateBgHeight(-1, 200);
			   console.log(this.dragOffsetX,this.dragOffsetY);
			 }

			 if(this.dragOffsetY > 100){
			   animateBgHeight(1, 564);
			   console.log(this.dragOffsetX,this.dragOffsetY);
			 }

		 },
		activeCate(id){
		// 点击分类时，将goodslist中categoryid为id的第一个商品滚动到第一行
		this.currentCate = id;
		this.scrollToCategory(id);
		},
		
		// 滚动监听
		onScroll(e) {
			if (this.isScrolling) return;
			
			const scrollTop = e.detail.scrollTop;
			this.updateActiveCategory(scrollTop);
		},
		
		// 根据滚动位置更新激活的分类
		updateActiveCategory(scrollTop) {
			for (let i = this.categoryHeights.length - 1; i >= 0; i--) {
				if (scrollTop >= this.categoryHeights[i].offsetTop) {
					if (this.currentCate !== this.categoryHeights[i].categoryId) {
						this.currentCate = this.categoryHeights[i].categoryId;
					}
					break;
				}
			}
		},
		
		// 滚动到指定分类
		scrollToCategory(categoryId) {
			this.isScrolling = true;
			const targetHeight = this.categoryHeights.find(item => item.categoryId === categoryId);
			if (targetHeight) {
				// 使用平滑滚动
				this.scrollTop = targetHeight.offsetTop;
				// 延迟重置滚动状态，给滚动动画足够时间
				setTimeout(() => {
					this.isScrolling = false;
				}, 500);
			}
		},
		
		// 计算分类高度
		calculateCategoryHeights() {
			this.$nextTick(() => {
				this.categoryHeights = [];
				let currentOffset = 0;
				
				this.cates.forEach(category => {
					// 分类标题高度 60rpx
					let categoryHeight = 60;
					
					// 计算该分类下所有商品的总高度
					category.goods.forEach(goods => {
						// 每个商品项的高度大约是 232rpx (192rpx 图片 + 40rpx margin)
						categoryHeight += 232;
					});
					
					this.categoryHeights.push({
						categoryId: category.id,
						offsetTop: currentOffset,
						height: categoryHeight
					});
					
					currentOffset += categoryHeight;
				});
			});
		},
		subGoods(id){
			this.cates.forEach(category => {
				category.goods = category.goods.map(item => {

					if(item.id === id){
						this.$u.subQuantity({
							...item,
							price: item.goods_price,
							quantity: item.buy - 1
						});
						return { ...item, stock: item.stock + 1,buy: item.buy - 1 }
					}
					return item;
				}
				);
			});
		},
		addGoods(id){
			this.cates.forEach(category => {
				category.goods = category.goods.map(item => {
					if(item.id === id){

						this.$u.addQuantity({
							...item,
							price: item.goods_price,
							quantity: item.buy + 1
						});
						return { ...item, stock: item.stock - 1,buy: item.buy + 1 }
					}
					return item;
				}
					
				);
			});
			
		},
		backNav(){
			console.log('backNav');
		// 判断uni-app页面栈是否有页面，没有则切换到首页
		const pages = getCurrentPages();
		if (pages.length <= 1) {
			uni.switchTab({
				url: '/pages/index/index'
			});
		} else {
			uni.navigateBack();
		}
		},

		Goto(){
				let latitude =Number(this.shopInfo.latitude) 
				let longitude =Number(this.shopInfo.longitude) 
				let address = this.shopInfo.address
				uni.getLocation({
					type: 'gcj02', 
					success: function(res) {
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							address: address,
							success: function(req) {
							},
							fail(was) {
							}
						});
					},
					fail: function(res) {
						if (res.errMsg == "getLocation:fail auth deny") {
							uni.showModal({
								content: '检测到您没打开获取信息功能权限，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success: (res) => {
									if (res.confirm) {
										uni.openSetting({
											success: (res) => {
											}
										})
									} else {
										return false;
									}
								}
							})
						}
					}
				});		
		},
		playphone(){
			uni.makePhoneCall({
				phoneNumber:this.shopInfo.mobile,
				success(res) {
				},
				fail(req) {
				}
			})
		},
		handleNavItemClick(index) {
			this.activeIndex = index;
		},
		previewImage(url) {						
			if(Array.isArray(url)){
				uni.previewImage({
					urls: url
				})
			}else{
				uni.previewImage({
					urls: [url]
				})
			}
		}
	}
}
</script>

<style scoped lang="scss">
.nav-top{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 106rpx;
	background-color: #ffffff;
	
}

.out-main{
	width: 750rpx;
	height: 100vh;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	.navTop{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		padding-top: 106rpx;
		background: rgba(3,3,3,0);
		color: white;
		position: fixed;
		width: 100%;
	}
	.left{
		width: 40rpx;
		height: 40rpx;
		background: #F1F1F1;
		border-radius: 40rpx;
	}
	
	.topBg{
		width: 750rpx;
		height: 564rpx;
		object-fit: cover;
		object-fit: aspectFill;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.main-content{
		position: relative;
		width: 690rpx;
		height: 100vh;
		border-radius: 24rpx;
		box-shadow: 0 2rpx 12rpx 2rpx #015aff0f;
		box-sizing: border-box;
		padding: 30rpx 30rpx 20rpx 30rpx;
		height: 374rpx;
		background-color: #FFFFFF;
		align-self: center;
		margin-top: -148rpx;

	}

	scroll-view{
		flex: 1;
		min-height: 0;
		max-height: 100vh;
		overflow: hidden;
	}
	.logo{
		background: rgb(228, 231, 219);
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
		position: absolute;
		top : 30rpx;
		right: 30rpx;
	}

	.title-bar{
		display: flex;
		align-items: center;
		.title{
			font-size: 36rpx;
			font-weight: bold;
			color: #202020;	
			display: flex;
			align-items: center;
			
		}
		.tag{
			width: 44rpx;
			height: 44rpx;
			
			margin-left: 8rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}

	.info-bar{
		position: relative;
		display: flex;
		flex-direction: column;
		.row1{
			display: flex;
			align-items: center;
			width: 348rpx;
			justify-content: space-between;
			margin-top: 20rpx;
			position: relative;

			.tit{
				font-size: 24rpx;
				color: #999999;
			
			}
			.num{
				font-size: 28rpx;
				color: #333333;
				margin-top: 4rpx;
			}
			.stat{
				font-size: 28rpx;
				font-weight: bold;
				color: #1DC57C;
				margin-top: 4rpx;
			}
			.tit,.num,.stat{
					/* 文本不换行 */
					white-space: nowrap;
			}

			.col1,.col2,.col3{
				text-align: center;
				position: relative;
			}
			.col2:before,.col3:before{
				content: '';
				position: absolute;
				width: 1rpx;
				height: 42rpx;
				left: -40rpx;
				top: 20rpx;

				background: #EFEFEF;
			}
			
		}
		.row2{
			display: flex;
			align-items: center;
			width: 100%;
			margin-top: 20rpx;
			.label1,.label2{
				display: flex;
				border-radius: 4rpx;
				border: solid 1rpx #F44848;
				padding: 1rpx 12rpx 1rpx 8rpx;
				align-items: center;
				
				.quan{
					color: white;
					background: #F44848;
					width: 24rpx;
					height: 24rpx;
					font-size: 18rpx;
					display: flex;
					justify-content: center;
					align-items: center;

				}
				.miaoshu{
					font-size: 22rpx;
					color: #FF4848;
					margin-left: 4rpx;
					text-align: center;
					
				}
			}
			.label2{
				margin-left: 12rpx;
			}
		}
		
	}
	.info-bar:before{
		content: "";
		position: absolute;
		top: 166rpx;
		width: 100%;
		height: 1rpx;
		background: #EFEFEF;
	}

	.row3{
		margin-top: 40rpx;
		font-size: 24rpx;
		color: #333333;
		display: flex;
		.dizhi{
			max-width: 424rpx;
			max-height: 84rpx;
			line-height: 1.8;
			max-height: 84rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}
		.icon-group{
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.daohang,.dianhua{
				display: flex;
				margin-left: 20rpx;
				flex-direction: column;
				align-items: center;
				color: #999999;
				uni-icons{
					width: 48rpx; 
					height: 48rpx; 
					background:#F1F1F1; 
					border-radius: 48rpx; 
					display: flex; 
					justify-content: center; 
					align-items: center;
				}
				
				span{
					margin-top: 4rpx;
				}

			}
		}
	}

	.navigator{
		display: flex;
		align-items: center;
		margin-top: 40rpx;
		font-size: 32rpx;
		padding-left: 30rpx;
		box-sizing: border-box;
		width: 100%;
		.nav-item:not(:first-child){
			margin-left: 60rpx;
		}
		.nav-item.active{
			color: #333333;
			font-weight: bold;
			position: relative;
			
		}
		.nav-item.active::after{
			content: '';
			position: absolute;
			right: 6rpx;
			bottom: -6rpx;
			width: 50rpx;
			height: 6rpx;
			border-radius: 6rpx;
			background: #F16325;
		}
		
	}
	.merchant-info{
		width: 690rpx;
		align-self: center;
		box-sizing: border-box;
		overflow: hidden;
		flex-shrink: 0;
		margin: 24rpx auto;
		box-shadow: 0 2rpx 12rpx 2rpx #0000000f;
		border-radius: 24rpx;
		
		.shop-env{
			padding: 30rpx;
			border-radius: 24rpx;
			background-color: white;
			.title{
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				
				span{
					margin-left: 16rpx;
				}
				.more{
					margin-left: auto;
					color: #999999;
					font-size: 22rpx;
					display: flex;
					align-items: center;
					font-weight: normal;
				}
			}
			.pic-group{
				margin-top: 24rpx;
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				justify-content: space-between;

				.pic-item{
					width: 196.6rpx;
					border-radius: 20rpx;
					height: 147.84rpx;
					overflow: hidden;
					.pic{
						width: 100%;
						height: 100%;
					}
				}
				.pic-item:not(:first-child){
					margin-left: 22rpx;
				}
			}
		}
	}
	.merchant-info:first-child{
		margin-top: 0;
	}
	
	.order-dish{
		display: flex;
		margin-top: 24rpx;
		flex: 1;
		overflow: hidden;
		height: 100%;
		.aside{

			width: 160rpx;
			background-color: #F6F8F7;
			flex: 0 0 160rpx;
			height: 100%;
			

			.sidebar{
				
				width: 160rpx;
				height: 96rpx;
				font-size: 24rpx;
				color: #333333;
				padding: 12rpx 24rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
				
				
			}
			.sidebar.active{
				background-color: #FFFFFF;
				color: #F16325;
			}
		}

		.receip{
			flex: 1;
			overflow: hidden;
			height: 100%;
			
			.category-title{
				background-color: #F6F8F7;
				padding: 20rpx 30rpx;
				font-size: 24rpx;
				color: #333333;
				font-weight: bold;
				border-left: 4rpx solid #F16325;
			}
			
			.goods-bar{
				display: flex;
				margin-left: 30rpx;
				padding-right: 30rpx;
				.goods-logo{
					width: 192rpx;
					height: 192rpx;
					border-radius: 24rpx;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
					
				}
				.goods-info{
					flex: 1;
					margin-left: 22rpx;
					.goods-name{
						font-size: 28rpx;
						color: #333333;
						font-weight: bold;
					}
					.goods-rank{
						font-size: 24rpx;
						color: #1DC57C;
						margin-top: 4rpx;
						font-weight: bold;
					}
					.sales{
						font-size: 24rpx;
						color: #999999;
						margin-top: 4rpx;
					}
					.select{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 26rpx;
						.goods-price{
							display: flex;
							align-items: center;
							.yuan{
								font-size: 24rpx;
								color: #F24040;
							}
							.price{
								font-size: 36rpx;
								color: #F24040;
								font-weight: bold;
							}
						}
						.operate{
							display: flex;
							align-items: center;
							.sub,.add{
								width: 48rpx;
								height: 48rpx;
								background: #F1F1F1;
								border-radius: 48rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 32rpx;
								color: #333333;
								font-weight: bold;
								border-radius: 48rpx ;
							}
							.add{
								background: #F16325;
								color: #ffffff;
								margin-left: 20rpx;
							}
							.sub{
								color: #F16325;
								background: #ffffff;
								border: 1rpx solid #F16325;
								margin-right: 20rpx;
							}
						}
					}
				}
			}
			.goods-bar:not(:first-child){
				margin-top: 40rpx;
			}
		}
	}
	.footer{
		width: 750rpx;
		margin-left: auto;
		display: flex;
		height: 166rpx;
		flex-shrink: 0;
		box-sizing: border-box;
		padding: 10rpx 30rpx;
		position: relative;
		.shop-cart{
			position: absolute;
			left: 0;
			bottom: 166rpx;
			width: 750rpx;
			height: 630rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			padding: 40rpx 30rpx 30rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.cart-header{
				flex-shrink: 0;
				display: flex;
				height: 84rpx;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;
				.cart-header-left-title{
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}
				.cart-header-left-close{
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}
			.cart-list{
				width: 100%;
				flex: 1;
				box-sizing: border-box;
				.cart-item{
					display: flex;
					.cart-item-left{
						width: 132rpx;
						height: 132rpx;
						overflow: hidden;
						border-radius: 24rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.cart-item-second{
						flex: 1;
						margin-left: 20rpx;
						height: 132rpx;
						justify-content: space-between;
						display: flex;
						flex-direction: column;
						.cart-item-name{
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
						}
						.cart-item-price{
							font-weight: bold;
							font-size: 36rpx;
							color: #F24040;
							display: flex;
							align-items: center;
							.rmb{
								font-weight: 400;
								font-size: 24rpx;
								color: #F24040;
							}
						}
						.cart-item-guige{
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}
						.cart-item-total{
							font-size: 24rpx;
							color: #999999;
						}

					}
					.cart-item-right{
						display: flex;
						align-items: center;
						align-self: flex-end;
						width: 184rpx;
						justify-content: space-between;
						.cart-item-sub{
							width:44rpx;
							height: 44rpx;
							border-radius: 44rpx;
							background: white;
							border: solid 1rpx #F16325;
							font-size: 24rpx;
							color: #F16325;
							display: flex;
							align-items: center;
							justify-content: center;
						}
						.cart-item-add{
							width:44rpx;
							height: 44rpx;
							border-radius: 44rpx;
							background: #F16325;
							font-size: 24rpx;
							color: #ffffff;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}

				.cart-item:not(:first-child){
					margin-top: 20rpx;
				}
			}
		}

		.foot-icon{
			position: relative;
			image{
				width: 80rpx;
				height: 80rpx;
			}
			.tip{
				position: absolute;
				top: -5rpx	;
				right: -12rpx;
				width: 32rpx;
				height: 32rpx;
				background: #F24040;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.total-bar{
			display: flex;
			margin-left: 28rpx;
			flex-direction: column;
			justify-content: space-between;
			height: 80rpx;
			.total-top{
				display: flex;
				align-items: center;				
				.rmb{
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					margin-top: 10rpx;
				}
				.total-price{
					font-weight: bold;
					font-size: 36rpx;
					color: #333333;
				}
			}
			.total-bottom{
				max-width: 244rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				
				.total-price{
					font-size: 36rpx;
				}
			}
		}
		.footer-btn{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 336rpx;
			height: 80rpx;
			margin-left: auto;

			.old-pay{
				width: 164rpx;
				height: 76rpx;
				border-radius: 38rpx 38rpx 38rpx 38rpx;
				border: 2rpx solid #F16325;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.submit{
				margin: 0;
				margin-left: 8rpx;
				margin-left: auto;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 164rpx;
				height: 76rpx;
				background: #F16325;
				color: #ffffff;
				font-size: 32rpx;
				border-radius: 38rpx;
			}
		}
	}

}

</style>